<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table>
        <tr>
            <td>手机号</td>
            <td><input class='phoneNum' type="text"></td>
            <td></td>
        </tr>
        <tr>
            <td>邮箱</td>
            <td><input class='email' type="text"></td>
            <td></td>
        </tr>
        <tr>
            <td>密码</td>
            <td><input class='psw' type="password"></td>
            <td></td>
        </tr>
    </table>
    <button disabled class="rigster">注册</button>
    <script>
        var flag1,flag2,flag3;
        console.log(flag1,flag2,flag3);
        document.querySelector('.phoneNum').onblur=function(){
            var value=this.value;
            if(/^1[356789]\d{9}$/.test(value)){
                this.parentElement.nextElementSibling.innerHTML='<span style="color:green">√<span>'
                   flag1=true;
            }else{
                this.parentElement.nextElementSibling.innerHTML='<span style="color:red">×<span>'
                    flag1=false;
            }
            check()
        }
        document.querySelector('.email').onblur=function(){
            var value=this.value;
            if(/\w{3,24}\@(136|qq)\.(com|cn)$/.test(value)){
                this.parentElement.nextElementSibling.innerHTML='<span style="color:green">√<span>'
                  flag2=true;
            }else{
                this.parentElement.nextElementSibling.innerHTML='<span style="color:red">×<span>'
                    flag2=false;
            }
            check()
        }
        document.querySelector('.psw').onblur=function(){
            if(this.value.length>=6){
                this.parentElement.nextElementSibling.innerHTML='<span style="color:green">√<span>'
                flag3=true;
            }else{
                this.parentElement.nextElementSibling.innerHTML='<span style="color:red">×<span>'
                flag3=false;
            }
            check()
        }
        function check(){
           var res= document.querySelector('.rigster');
           flag1&flag2&flag3? res.disabled=false:res.disabled=true;
        }

    </script>
</body>
</html>